﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="photoViewer.aspx.cs" Inherits="Paltop_v0._1.UI.photoViewer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="../Scripts/JQuery/jquery-1.6.4.js" type="text/javascript"></script>
    <link href="../Styles/FileManager/photoViewer.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="photoViewer">
            <div id="photoTitle">
            </div>
            <div id="photoContainer">
                <img alt="" id="photoContainerImage" /><img id="photoWait" src=""
                    class="" />
                <div id="navBar">
                    <span id="nextPhoto"><a href="#">
                        <img  id="nextButtImage" src="../TemplateImages/PhotoViwer/playback_next.png" height="24" width="24"  class="NavButton" /></a></span> <span id="previosPhoto"><a href="#">
                            <img  id="backButtImage"src="../TemplateImages/PhotoViwer/playback_prev.png" height="24" width="24"  class="NavButton" />
                        </a></span></div>
            </div>
        </div>
    </div>
    </form>
    <script type="text/javascript">
        var files;
        var currentPhoto = 0;
        var navFlag;
        var navOpc = .4;
        var json=<% Response.Write(pAddr); %>
        $(document).ready(
        function () {
            $("#nextPhoto").click(NextPhoto);
            $("#previosPhoto").click(PreviosPhoto);
            $("#photoContainer").hover(function () { NavBarShow(); });
            $("#photoContainer").mouseover(function () { NavBarShow(); });
            $("#photoContainer").mouseleave(function () { NavBarHide(); });
            $("#nextButtImage").mouseover(function () { NavBarFullShow(); });
            $("#backButtImage").mouseover(function () { NavBarFullShow(); });
            $("#nextButtImage").mouseenter(function () { NavBarFullShow(); });
            $("#backButtImage").mouseenter(function () { NavBarFullShow(); });
            $("#nextButtImage").mouseout(function () { NavBarHalfShow(); });
            $("#backButtImage").mouseout(function () { NavBarHalfShow(); });
            files=json;
            ShowPicture(0);
        }
        );


        function ShowPicture(id) {
            if (isNaN(id)) {
                id = 0;
            }
            var image = $("#photoContainerImage");
            var top = image.height() / 2 + 50;
            $("#photoWait").css("top", top / 2);
            $("#navBar").css("top", -(top - 50));
            $("#photoWait").show();
            $("#photoContainerImage").hide();
            $("#photoContainerImage").load(function () {
                $("#photoWait").hide();
                $("#photoContainerImage").fadeIn("slow");
                image = $("#photoContainerImage");
                var top = image.height() / 2;
                $("#photoContainer").css("height", image.height() + 40);
                $("#photoContainer").css("width", image.width() + 40);
                $("#navBar").css("top", -(top + 20));
                navFlag = true;
                NavBarShow();
            });
            var src = "ThumbnailHandler.ashx?imageUrl=" + files[id] + "&ext=jpg" + "&maxH=400" + "&maxW=400";
            $("#photoContainerImage").attr("src", src);

        }

        function NextPhoto() {

            NavBarHide();
            navFlag = false;
            if (currentPhoto < files.length - 1)
                currentPhoto++;
            else
                currentPhoto = 0;
            ShowPicture(currentPhoto);
        }
        function PreviosPhoto() {

            $("#navBar").hide();
            if (currentPhoto > 0)
                currentPhoto--;
            else
                currentPhoto = files.length - 1;
            ShowPicture(currentPhoto);

        }
        function NavBarShow() {
            if (navFlag)
                $("#navBar").fadeTo("fast", navOpc);

        }

        function NavBarHide() {
            $("#navBar").hide();
        }

        function NavBarFullShow() {

            navOpc = 0.8;
        }

        function NavBarHalfShow() {
            navOpc = 0.4;
        }
    
    </script>
</body>
</html>
